import React,{Component} from 'react';
import {
    View,
    Text,
    TouchableOpacity,
} from 'react-native';
import { CLEAR_COLOR } from './config';

class UIButton extends Component{
    constructor(props) {
        super();
        this._setDefaultState(props);
    }
    render(){
        const {
            styles,
            selected,
            name
        } = this.state;

        return(
            <View style={{
                        flex:1,
                        shadowColor : styles.shadowColor,
                        shadowOffset : styles.shadowOffset ,
                        shadowOpacity : styles.shadowOpacity ,
                        shadowRadius : styles.shadowRadius,
                        // overflow : 'hidden',
                        elevation : styles.elevation,
                        justifyContent:'center',
                        backgroundColor: this.state.styles.backgroundColor,
                        backgroundColor : ((selected && styles.backgroundColorDisabled != null) ? styles.backgroundColorDisabled : styles.backgroundColor),
                        borderRadius : styles.borderRadius,
                        borderColor : styles.borderColor,
                        borderWidth : styles.borderWidth,
                    }}>
                <TouchableOpacity  
                activeOpacity={0.6}
                style={{
                        flex : 1,
                        margin:0,
                        padding:styles.padding,
                        justifyContent:'center',
                        alignItems:'center',
                        overflow:'hidden'
                    }}  
                    onPress={()=>{
                        //动态修改按钮颜色和文字
                        this.state.onPress && this.state.onPress(this.state.tagId);
                        if (this.state.titleColorDisabled || this.state.titleDisabled || this.state.backgroundColorDisabled ) {
                            this.setState({
                                selected: selected ? false : true
                            })
                        }
                        
                    }}>
                <Text allowFontScaling={false} style={{
                            textAlign: styles.textAlign,
                            fontWeight: styles.fontWeight,
                            fontSize: styles.fontSize,
                            color: ((selected&&styles.titleColorDisabled !=null)?styles.titleColorDisabled:styles.titleColor)
                            }}>{(selected&&styles.titleDisabled!=null)?styles.titleDisabled:name}</Text>
                </TouchableOpacity> 
            </View>
        )
    }
    UNSAFE_componentWillMount(){
        this.mounted = true;
    }
    componentWillUnmount(){
        this.mounted = false;
    }
    UNSAFE_componentWillReceiveProps(nextProps){
        if (this.mounted) {

            this.setState({
                styles: Object.assign({}, this.state.styles, nextProps.styles),
                name:nextProps.name,
                tagId:nextProps.tagId,
            })
              
        }
    }
    _setDefaultState(props){
        if (!props && this.props) {
            props = this.props

        } else if (!props && this.props) {
            return null
        }
        const backgroundColor = props.styles.backgroundColor ? props.styles.backgroundColor : CLEAR_COLOR;
        const styles = props.styles ? props.styles : {};
        this.state = {
            name: props.name ? props.name : '',
            selected: props.selected ? props.selected : false,
            onPress: props.onPress ? props.onPress : (() =>{
                alert(this.state.name);
            }),
            tagId: props.tagId,
            styles: {
                    padding : styles.padding ? styles.padding : 0,
                    titleColor : styles.titleColor ? styles.titleColor : '#333333',
                    backgroundColor : backgroundColor,
                    fontSize : styles.fontSize ? styles.fontSize : 14,
                    width : styles.width ? styles.width : 0,
                    height : styles.height ? styles.height : 0,
                    borderRadius : styles.borderRadius ? styles.borderRadius : 0,
                    textAlign : styles.textAlign ? styles.textAlign : 'center',
                    borderWidth : styles.borderWidth ? styles.borderWidth : 0,
                    borderColor : styles.borderColor ? styles.borderColor : styles.backgroundColor ? styles.backgroundColor : CLEAR_COLOR,
                    backgroundColorDisabled : styles.backgroundColorDisabled ? styles.backgroundColorDisabled : null,
                    titleColorDisabled : styles.titleColorDisabled ? styles.titleColorDisabled : null,
                    titleDisabled : styles.titleDisabled ? styles.titleDisabled : null,
                    shadowColor : styles.shadowColor ? styles.shadowColor : null,
                    shadowOffset : styles.shadowOffset ? styles.shadowOffset : null,
                    shadowOpacity : styles.shadowOpacity ? styles.shadowOpacity : null,
                    shadowRadius : styles.shadowRadius ? styles.shadowRadius : null,
                    elevation : styles.elevation ? styles.elevation : null,
                    paddingHorizontal: styles.paddingHorizontal ? styles.paddingHorizontal : styles.padding ? styles.padding : 0,
                    paddingVertical: styles.paddingVertical ? styles.paddingVertical : styles.padding ? styles.padding : 0,
                    fontWeight: styles.fontWeight ? styles.fontWeight : 'bold'
              }
        };
    }
}

module.exports = UIButton;